<template>

  <div class="AddOrUpdate_main add_container main_container">

    <div class="main_main">
      <div v-for="item in taskList" :key="item.index" class="task_list">
        <div class="left_content">
          <svg-icon style="font-size:24px" :icon-class="item.icon" />
          <div class="task">
            <div class="title">{{ item.title }}</div>
            <div class="content">{{ item.content }}</div>
          </div>
        </div>
        <div class="right_icon">
          <svg-icon v-for="(item2,index) in item.maxNumber" :key="index" style="font-size:40px" :icon-class="item2<=item.currentNumber?(item.icon+item2)+'':'未'+(item.icon+item2)+''" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { taskList } from '@/api/common/personalCenter'
export default {
  name: 'PersonalAccount',
  data() {
    return {
      tableData: [],
      taskList: [
        { icon: '每日登录', title: '每日登录', content: '登录系统、赢得极分', maxNumber: 3, currentNumber: 1 },
        { icon: '邀请同事', title: '邀请同事', content: '邀请同事加入公司，与你一起赚极分', maxNumber: 3, currentNumber: 1 },
        { icon: '基础数据录入', title: '基础数据录入', content: '新增一条基础数据，激活系统，赚极分', maxNumber: 1, currentNumber: 1 },
        { icon: '基础数据导入', title: '基础数据导入', content: '完成一次基础数据导入，完善系统，赚极分', maxNumber: 1, currentNumber: 1 },
        { icon: '新增单据', title: '新增单据', content: '新增系统单据，当日可获得1极分', maxNumber: 2, currentNumber: 1 },
        // { icon: '引用数据', title: '引用数据', content: '个人创建数据被引用，当日可获得1极分', maxNumber: 2, currentNumber: 1 },
        { icon: '执行单据', title: '执行单据', content: '执行单据任务，当日可获得1极分', maxNumber: 2, currentNumber: 1 }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      taskList({ userId: this.$store.state.user.userId }).then(res => {
        this.tableData = res.data.map(item => {
          return Number(item.points)
        })
        this.taskList.forEach((ele, index) => {
          ele.currentNumber = this.tableData[index]
        })
        console.log(this.taskList)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main_container{
  height: 100%;
}
.main_main{
height: 100%;
overflow: auto;
margin: unset !important;
padding: 0 20px;
padding-top: 5px !important;
.task_list{
    margin-bottom:10px ;
    padding:10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color:#F4F5F5 ;
    border-radius: 8px;
    .left_content{
        display: flex;
        align-items: center;
        .task{
            margin-left: 30px;
            .title{
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                margin-bottom: 10px;
            }
            .content{
                font-size: 14px;
                font-weight: 400;
                color: #999999;
            }
        }
    }
    .right_icon{
        width: 200px;
        display: flex;
        justify-content: flex-start;
        // justify-content: space-around;
        align-items: center;
        .svg-icon{
            margin-right: 20px;
        }
    }
}
}

</style>
